ajax的神奇之处在于，JavaScript可以在不重新加载页面的情况下与Web服务器交换数据，也就是说，它可以在不刷新页面的情况下产生部分刷新效果。Ajax使用浏览器和Web服务器之间的异步数据传输(HTTP请求)，但也可以同步，这样Web页面就可以向服务器请求少量信息，而不是整个页面。Ajax让我们的项目变得更小、更快、更友好。它在前端开发中有很高的地位，也是面试问题中的热门话题。该测试在localhost本地环境中进行。

1.本地ajax

(1)在1)html前端代码get request模式下创建一个ajax实例。three()方法传入三个参数，第一个是request mode(一般是get和post)，第二个参数是request address，第三个布尔值，true代表异步，false代表同步发送发送数据(get不能使用，而get发送的数据通常在链接后面，所以是显式的值传递，采用键值对的形式)。

var xhr=new XMLHttpRequest()xhr . open(' GET '，' js/text.js '，True)xhr . send()xhr . onreadystatechange=function(){//if(xhr . readystate===4xhr . status===200){ vardata=xhr . responsetext vardata=JSON . parse(data)console . log(dataset

(2)html前端代码post请求模式post传输模式需要设置头信息。也可以设置简单请求而不设置它。这里传递的值放在send()方法中，所以它是隐式的，其他一切都与get相同。

var xhr=new XMLHttpRequest()xhr . open(' POST '，' js/text.js '，true)xhr . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；xhr . send()xhr . onreadystatechange=function(){ if(xhr . readystate===4xhr . status==200){ vardata=xhr . responsetext vardata=JSON . parse(数据)console.log(数据集)}}控制台输出

(3)请求的js代码

{ '姓名' : '小明'，'年龄' :24，'数组' : [1，51，3，4，4，6，64]} 2。函数封装由这里的函数封装的ajax方法。使用时，直接调用方法，传入设置参数即可

参数包括请求类型、请求地址url、传入数据(在这种情况下没有)、“占位符也是需要的”，以及请求成功返回功能(还可以添加一个失败返回功能)

(1)前端JS代码

函数Ajax(类型、url、数据、成功){ var xhr=null//初始化xhrif(window . XMLHttpRequest){//兼容IE xhr=new XMLHttpRequest()；} else { xhr=new ActiveX object(' Microsoft。XMLHTTP ')} var type=type . touppercase()；var random=math . random()；//创建随机数if(type==' get '){ if(data){ xhr . open(' get '，URL '？'数据，真)；//如果有数据就拼接} else {xhr.open('GET '，url '？t=' random，true)；//如果没有数据就传一个随机数} xhr . send()；} else if(type==' POST '){ xhr . open(' POST '，url，true)；xhr . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；xhr.send(数据)；} xhr . onreadystatechange=function(){//创建侦听函数if(xhr . readystate==4xhr . status==200){ success(xhr . responsetext)；}}} Ajax ('get '，' js/text.js '，''，function(data){//调用函数console . log(JSON . parse(data))；});(2)请求的js代码

{ '姓名' : '小明'，'年龄' :24，'数组' : [1，51，3，4，6，64]}控制台输出

3.Jquery中的ajax(先介绍一下Jquery)(1)Jquery中的ajax，是前端简单的JS代码，由库封装，所以我们可以直接使用。这里有一个简单的Ajax请求，它也有许多参数，但基本就是这些。

$.Ajax ({URL : '。/js/text.js '，类型：' get '，数据类型：' JSON '，成功：函数(data) {console.log (data)}，错误：函数(RES){ console . log())})})(2)请求的js代码

{ '姓名' : '小明'，'年龄' :24，'数组' : [1，51，3，4，6，64]}控制台输出

以上如有不妥，请指正，谢谢支持。

版权声明：详细解释Jquery中的JavaScript原生封装ajax请求和ajax请�是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。